<!doctype html>
<head>
	<link rel="stylesheet" href="css/msgdlg.css" type="text/css" media="all" />
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
	<script type="text/javascript" src="js/jquery-ui-1.8.14.custom.min.js"></script>
	<script type="text/javascript" src="js/msgdlg.js"></script>
	
	<style type="text/css">
	.demo-section {
		border: 1px solid gray;
		border-radius: 4px;
		margin: 1em;
		padding: 1em;
	}

	.demo-section .title {
		font-size: 1.5em;
		font-weight: bold;
		padding-left: 2em;
	}

	.demo-section .title .em {
		color: #d80000 !important;
	}

	.demo-section input {
		width: 200px;
	}

	.demo-section .sub-section {
		font-size: 1.25em;
		font-weight: bold;
		margin-bottom: 1em;
	}

	.demo-section ul {
		list-style: none;
	}

	.demo-section ul li input {
		width: 20px;
	}
	</style>

	<script type="text/javascript">
	function showSimple() {
		msg( "This is a simple message dialog, you likey?" );
	}

	function showCustom() {
		var text = $( "#msgdlg_text" ).val();
		var type = 0;
		var btns = [];
		if ( $.trim( text ) == "" ) {
			MessageDlg( "Don't be lazy, type a few characters!", mtError, [mbOK] );
			return;
		}
		$( ".msgdlgtype" ).each(function() {
			if ( $( this ).is(":checked") ) {
				type = $( this ).val();
			}
		});
		$( ".msgdlgbtntype" ).each(function() {
			if ( $( this ).is(":checked" ) ) {
				btns.push( $( this ).val() );
			}
		});
		if ( btns.length == 0 ) {
			MessageDlg( "You must select at least one button type!", mtError, [mbOK] );
			return;
		}
		MessageDlg( text, type, btns, function( result ) {
			msg( "You clicked [" + getMsgDlgBtnInfo( result ).caption + "]" );
		});
	}
	</script>
</head>
<body>

<div class="demo-section">
	<div class="title">Simple message dialog</div>
	<div style="margin-top: 1em;">
		<button onclick="showSimple();">Show simple message</button>
	</div>
</div>

<div class="demo-section">
	<div class="title"><span class="em">Custom</span> message dialog</div>
	<div>
		<div class="sub-section">Text</div>
		<div>
			<input id="msgdlg_text" />
		</div>
		
		<div class="sub-section">Type</div>
		<ul>
			<li><input type="radio" class="msgdlgtype" name="type" value="0" checked="checked" />mtInformation</li>
			<li><input type="radio" class="msgdlgtype" name="type" value="1" />mtConfirmation</li>
			<li><input type="radio" class="msgdlgtype" name="type" value="2" />mtWarning</li>
			<li><input type="radio" class="msgdlgtype" name="type" value="3" />mtError</li>
		</ul>

		<div class="sub-section">Buttons</div>
		<ul>
			<li><input type="checkbox" class="msgdlgbtntype" value="0" />mbOK</li>
			<li><input type="checkbox" class="msgdlgbtntype" value="1" />mbYes</li>
			<li><input type="checkbox" class="msgdlgbtntype" value="2" />mbNo</li>
			<li><input type="checkbox" class="msgdlgbtntype" value="3" />mbCancel</li>
			<li><input type="checkbox" class="msgdlgbtntype" value="4" />mbAbort</li>
			<li><input type="checkbox" class="msgdlgbtntype" value="5" />mbIgnore</li>
		</ul>
	</div>
	<button onclick="showCustom();">Show custom message</button>
</div>

</body>
</html>